import React, { useState } from "react";
import { Menu, Layout, Button, Modal } from "antd";
import { useNavigate } from "react-router-dom";
// import { HomeOutlined, UserOutlined } from "@ant-design/icons";
import AddStudent from "@/component/addStudent";
import RecipeTime from "@/component/recipeTime";
import AddDish from "@/component/addDish";
import ManageUser from "@/component/manageUser";
import ApplySchool from "@/component/applySchool";
import ManageSchool from "@/component/manageSchool";
import ManageStudent from "@/component/manageStudent";
import SearchDist from "@/component/searchDist";
import Super from "@/component/super";
import useData from "@/store";

import "./index.less";

const System: React.FC = () => {
  const navigate = useNavigate();
  const { Sider, Header, Content } = Layout;
  const [isShowModal, setIsShowModal] = useState(false);
  const [selectedMenu, setSelectedMenu] = useState("apply-school");
  const { asSuperManager, asSchoolManager } = useData((state) => ({
    asSuperManager: state.userInfo?.asSuperManager,
    asSchoolManager: state.userInfo?.asSchoolManager,
  }));

  const handleLogout = () => {
    setIsShowModal(true);
  };

  const logout = () => {
    setIsShowModal(false);
    useData.persist.clearStorage();
    navigate("/", { replace: true });
  };

  const handleMenuClick = (menuKey: string) => {
    setSelectedMenu(menuKey);
  };

  const Sidebar = () => {
    return (
      <div className="system-container">
        <Layout style={{ height: "100vh" }}>
          <Sider width={150}>
            <Menu
              theme="dark"
              mode="inline"
              selectedKeys={[selectedMenu]}
              onClick={({ key }) => handleMenuClick(key)}
            >
              <Menu.Item key="apply-school">申请学校</Menu.Item>
              {asSuperManager && <Menu.Item key="school">学校管理</Menu.Item>}
              {asSuperManager && <Menu.Item key="user">用户管理</Menu.Item>}
              {(asSuperManager || asSchoolManager) && (
                <Menu.Item key="student">学生管理</Menu.Item>
              )}
              <Menu.Item key="add-student">添加学生</Menu.Item>
              <Menu.Item key="search-dish">搜索菜单</Menu.Item>
              <Menu.Item key="add-dish">添加菜单</Menu.Item>
              <Menu.Item key="recipe-time">报告时间</Menu.Item>
              {asSuperManager && <Menu.Item key="super">超管</Menu.Item>}
            </Menu>
          </Sider>
          <Layout>
            <Header>
              {/* 添加其他内容 */}
              <div className="system-header">
                {useData.getState().userInfo?.realName}
                <Button type="primary" onClick={handleLogout}>
                  退出登录
                </Button>
              </div>
            </Header>
            <Content className="system-content">
              {selectedMenu === "apply-school" && <ApplySchool />}
              {selectedMenu === "school" && <ManageSchool />}
              {selectedMenu === "user" && <ManageUser />}
              {selectedMenu === "student" && <ManageStudent />}
              {selectedMenu === "add-student" && <AddStudent />}
              {selectedMenu === "search-dish" && <SearchDist />}
              {selectedMenu === "add-dish" && <AddDish />}
              {selectedMenu === "recipe-time" && <RecipeTime />}
              {selectedMenu === "super" && <Super />}
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  };

  return (
    <div>
      <Sidebar />
      <Modal
        open={isShowModal}
        onOk={logout}
        onCancel={() => setIsShowModal(false)}
      >
        确定退出登录吗？
      </Modal>
    </div>
  );
};

export default System;
